layui.use(['element','jquery', 'flow', 'code','layer'], function(){
    var $ = layui.jquery, element=layui.element, layer=layui.layer;
    var flow = layui.flow;
    layui.code();
    //当你执行这样一个方法时，即对页面中的全部带有lay-src的img元素开启了懒加载（当然你也可以指定相关img）
    flow.lazyimg();

    // 获取所需表格数据
    $.get('/php/public/api/lagou/charts.html', function (xhr) {
        console.log(xhr);
        // 基于准备好的dom，初始化echarts实例
        var area_job_chart = echarts.init(document.getElementById('area_job'));
        var tag_job_chart = echarts.init(document.getElementById('tag_job'));
        var education_job_chart = echarts.init(document.getElementById('education_job'));
        var experience_job_chart = echarts.init(document.getElementById('experience_job'));
        //地区职位表
        var area_job_chart_option = {
            title: {
                text: '各城区对应Python职位数量'
            },
            tooltip: {},
            legend: {
                data:['职位数量']
            },
            xAxis: {
                data:xhr.area_chart.x,
                axisLabel:{rotate:40}
            },
            yAxis: {},
            series: [{
                name: '职位数量',
                type: 'bar',
                label: {show: true, position: 'top', fontWeight: 'bold',color:'auto'},
                itemStyle: {
                    //通常情况下：
                    normal: {
                        color: function () {
                            return getColor();
                        }
                    },
                },
                //鼠标悬停时：
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                data: xhr.area_chart.y
            }]
        };
        area_job_chart.setOption(area_job_chart_option);
        //标签职位表
        var tag_job_option = {
            title : {
                text: 'Python职位标签统计',
                subtext: '(图中百分比为所占当前饼图的比例)',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: 20,
                bottom: 20,
                data: xhr.tags_chart.legendData,
                selected: xhr.tags_chart.selected
            },
            series : [
                {
                    name: '标签',
                    type: 'pie',
                    radius : '55%',
                    center: ['40%', '50%'],
                    data: xhr.tags_chart.seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        tag_job_chart.setOption(tag_job_option);
        //学历要求
        var education_job_chart_option = {
            title: {
                text: '学历要求'
            },
            tooltip: {},
            legend: {
                data:['职位数量']
            },
            xAxis: {
                data:xhr.education_chart.x,
               // axisLabel:{rotate:40}
            },
            yAxis: {},
            series: [{
                name: '职位数量',
                type: 'bar',
                //设置柱子的宽度
                barWidth : 60,
                label: {show: true, position: 'top', fontWeight: 'bold',color:'auto'},
                itemStyle: {
                    //通常情况下：
                    normal: {
                        color: function (params) {
                            return getColor();
                        }
                    },
                },
                data: xhr.education_chart.y
            }]
        };
        education_job_chart.setOption(education_job_chart_option);
        //经验要求
        var experience_job_chart_option = {
            title: {
                text: '工作经验要求'
            },
            tooltip: {},
            legend: {
                data:['职位数量']
            },
            xAxis: {
                data:xhr.experience_chart.x,
                // axisLabel:{rotate:40}
            },
            yAxis: {},
            series: [{
                name: '职位数量',
                type: 'bar',
                label: {show: true, position: 'top', fontWeight: 'bold',color:'auto'},
                itemStyle: {
                    //通常情况下：
                    normal: {
                        color: function (params) {
                            return getColor();
                        }
                    },
                },
                data: xhr.experience_chart.y
            }]
        };
        experience_job_chart.setOption(experience_job_chart_option);
    });

    //定义一个函数，实现随机生成十六进制颜色值
    function getColor(){
        //定义字符串变量colorValue存放可以构成十六进制颜色值的值
        var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
        //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
        var colorArray = colorValue.split(",");
        var color="#";//定义一个存放十六进制颜色值的字符串变量，先将#存放进去
        //使用for循环语句生成剩余的六位十六进制值
        for(var i=0;i<6;i++){
            //colorArray[Math.floor(Math.random()*16)]随机取出
            // 由16个元素组成的colorArray的某一个值，然后将其加在color中，
            //字符串相加后，得出的仍是字符串
            color+=colorArray[Math.floor(Math.random()*16)];
        }
        return color;
    }
});